<template>
  <el-drawer
    :title="title"
    :visible.sync="dialogVisible"
    direction="rtl"
    size="80%"
    :show-close="false"
  >
    <div class="drawerd u-p-b-50">
      <div class="btn-sticky">
        <el-button type="primary" size="mini" class="u-m-l-10" @click="subim"
          >保存</el-button
        >
        <el-button
          type="primary"
          size="mini"
          class="btn-stop-use"
          v-throttle="() => $emit('cancel')"
          >返回</el-button
        >
      </div>

      <h3 class="h3_tab">基本信息</h3>
      <hr />
      <Tab1 :mode="mode" ref="tab1" />
      <h3 class="h3_tab">联系人信息</h3>
      <hr />
      <Tab2 ref="tab2" />
      <h3 class="h3_tab">其他信息</h3>
      <hr />
      <Tab4 ref="tab4" />
    </div>
  </el-drawer>
</template>

<script>
import Tab1 from "./tbas/tab1.vue";
import Tab2 from "./tbas/tab2.vue";
import Tab4 from "./tbas/tab4.vue";
export default {
  components: {
    Tab1,
    Tab2,
    Tab4,
  },
  props: {
    mode: {
      type: String,
    },
  },
  data() {
    return {
      dialogVisible: true,
      title: "",
    };
  },
  methods: {
    // 提交成功
    sendOrdersSuccess() {
      this.$notify.success({
        title: "消息",
        message: "保存成功",
        position: "bottom-right",
      });
      this.$emit("done");
    },
    //提交
    subim() {
      let refs = this.$refs;
      if (!refs.tab1.verify_required()) return; //验证tab1必填项
      // if (!refs.tab3.verify_required()) return; //验证tab3必填项
      // if (!refs.tab4.verify_required()) return; //验证tab4必填项
      let bigObj = {
        tab1: refs.tab1.formData,
        tab2: refs.tab2.niandugongzuomubiao,
        tab3: refs.tab3.formData,
        tab4: refs.tab4.formData,
      };
      console.log("所有tab的提交", bigObj);
      this.sendOrdersSuccess();
    },
  },
  created() {
    if (this.mode === "addkehuxingxi_from") this.title = "新增客户信息";
    if (this.mode === "editkehuxingxi_from") this.title = "编辑客户信息";
  },
};
</script>

<style lang="scss" scoped>
.drawerd {
  padding: 0 20px;
}
.btn-stop-use {
  color: #444444;
  background: rgba(192, 192, 192, 1);
  border: 1px solid rgba(176, 177, 177, 1);
}
.h3_tab {
  margin-bottom: 0 !important;
}
.btn-sticky {
  text-align: right;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 22;
  padding-bottom: 5px;
}
</style>
